<template>
    <div class="goodsCtgBox">
        <!-- <span class="leftshade" v-if="lists.length>5"></span> -->
        <van-tabs v-model:active="active" class="provinceTab" @change="getData" :ellipsis="false">
            <van-tab v-for="(dt,index) in lists" :title="`${dt.name} (${dt.goodsNum})`" :key="'sycp'+index" :name="dt.goodsCategoryId"></van-tab>
        </van-tabs>
        <!-- <span class="rightshade"></span> -->
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { Tab as vanTab, Tabs as vanTabs } from 'vant';
import { useStore } from 'vuex'
import { monitorTouch } from '@/utils/common'
// import Tscroll from '@/components/Tscroll.vue';
export default {
    props:{

    },
    components:{
       vanTab,
       vanTabs,
       //Tscroll
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            active:0,
            lists:[]
        })

        onMounted(()=>{
            // monitorTouch((direction,distance)=>{
            //     console.log("----",direction,distance)
            // })
            store.dispatch('arApi/get_goods_category',{
                limit: 1000,
                page:1
            }).then(res=>{
                if(res.success && res.data.length>0){
                    let total = 0
                    res.data.forEach(item =>{
                        total+=item.goodsNum
                    })
                    state.lists=[{goodsCategoryId:'',goodsNum: total,name: "全部"},...res.data]
                }
                
            })
        })

        const getData = ()=>{
            context.emit('change',state.active)
        }


        return{
            ...toRefs(state),
            getData
        }
    }
}
</script>

<style lang="scss">
.goodsCtgBox{
        width: 100%;
        padding:15px 0 0 0;
        position: relative;
        z-index: 10;
        overflow: hidden;
        .rightshade{
            position: absolute;
            z-index: 10;
            height: 100%;
            width: 120px;
            right:0;
            top:0;
            background: linear-gradient(270deg, #022424 0%, rgba(2, 36, 36, 0) 100%);
        }
        .leftshade{
            position: absolute;
            z-index: 10;
            height: 100%;
            width: 120px;
            left:0;
            top:0;
            background:linear-gradient(90deg, #022424 0%, rgba(2, 36, 36, 0) 100%);
        }
        .provinceTab{
            .van-tab--grow{
                padding: 0 40px 0 0;
            }
            .van-tabs__nav{
                background: none;
            }
            .van-tabs__nav--line{
                padding-bottom: 0;
                padding-left: 0;
            }
            .van-tabs__line{
                display: none;
            }
            .van-tab{
                color: rgba(255, 255, 255, 0.5);
                font-size: 30px;
                justify-content:start;
                &.van-tab--active{
                    color: var(--baseColor);
                }
                &:last-child{
                    padding-right: 30px;
                }
            }
        }
}
    
</style>